<script setup lang="ts">
  import { ref } from 'vue'
  import { ElForm } from 'element-plus'
  import { SGridResponsive } from '@xtail/vue3'
  import { FormLabelPositionConstType, FormLabelPositionConst } from '../../common'
  import { FormColsResponsivePropsType } from './types'

  defineOptions({
    name: 'XFormColsResponsive'
  })

  const props = withDefaults(defineProps<FormColsResponsivePropsType>(), {
    labelOnTopWidth: 425,
    validateHandler: () => {}
  })

  const elFormRef = ref()
  defineExpose({
    elFormRef
  })

  const formLabelPosition = ref<FormLabelPositionConstType>(FormLabelPositionConst.RIGHT)
  const handleWidthUpdate = (size: number) => {
    if (size <= props.labelOnTopWidth) formLabelPosition.value = FormLabelPositionConst.TOP
    else formLabelPosition.value = props.labelPosition ?? FormLabelPositionConst.RIGHT
    props.widthUpdateHandler?.(size)
  }
</script>

<template>
  <el-form
    ref="elFormRef"
    class="x-form-cols-responsive"
    :model="model"
    :rules="rules"
    :inline="inline"
    :label-position="formLabelPosition"
    :label-width="labelWidth"
    :label-suffix="labelSuffix"
    :hide-required-asterisk="hideRequiredAsterisk"
    :require-asterisk-position="requireAsteriskPosition"
    :show-message="showMessage"
    :inline-message="inlineMessage"
    :status-icon="statusIcon"
    :validate-on-rule-change="validateOnRuleChange"
    :size="size"
    :disabled="disabled"
    :scroll-to-error="scrollToError"
    :scroll-into-view-options="scrollIntoViewOptions"
    @validate="validateHandler"
  >
    <s-grid-responsive
      :strategy="strategy"
      :width-update-handler="handleWidthUpdate"
      :immediate="immediate"
      :cols-default="colsDefault"
      :width-breakpoints="widthBreakpoints"
      :clos="clos"
      :rows="rows"
      :gap="gap"
      :col-gap="colGap"
      :row-gap="rowGap"
    >
      <slot />
    </s-grid-responsive>
  </el-form>
</template>

<style lang="scss">
  @use './style' as *;
</style>
